<template>
  <div class="index">
    <div class="swipper">
      <div class="absolute" @click.stop="$router.push({ path: '/workList', query: {
        title: '工作动态',
        method: 'jbxx1querydata4list'
      }})">
        工作动态
      </div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item,i) of list" :key="i" @click="itemClick(item[0])">
          <div class="swipe-item-box">
            <img :src="item[0].lpt" alt="" />
            <div class="item-describe">{{item[0].title}}</div>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <div class="grid">
        <router-link tag="div" to="/mineInfo" class="item-box">
          <img src="../assets/images/personal-info.png" alt="" />
          <div>个人信息</div>
        </router-link>
        <router-link tag="div" :to="{
            path: '/workList',
            query: {
              title: '工作动态',
              method: 'jbxx1querydata4list'
            }
          }" class="item-box">
          <img src="../assets/images/work-info.png" alt="" />
          <div>工作动态</div>
        </router-link>
        <router-link tag="div" :to="{
            path: '/announcement'
          }" class="item-box">
          <img src="../assets/images/notice.png" alt="" />
          <div>通知公告</div>
        </router-link>
        <router-link tag="div" to="/MyBranch" class="item-box">
          <img src="../assets/images/my-org.png" alt="" />
          <div>我的支部</div>
        </router-link>
        <router-link tag="div" to="/MyLife" class="item-box">
          <img src="../assets/images/my-life.png" alt="" />
          <div>我的生活</div>
        </router-link>
        <router-link tag="div" to="/activitySignUp" class="item-box">
          <img src="../assets/images/my-activity.png" alt="" />
          <div>我的活动</div>
        </router-link>
        <router-link tag="div" to="/SmartService" class="item-box">
          <img src="../assets/images/smart-service.png" alt="" />
          <div>智能服务</div>
        </router-link>
        <router-link tag="div" to="/medicalHeathCare" class="item-box">
          <img src="../assets/images/health-care.png" alt="" />
          <div>医疗保健</div>
        </router-link>
        <router-link tag="div" to="/presenceShow" class="item-box">
          <img src="../assets/images/style-show.png" alt="" />
          <div>风采展示</div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {jbxx1Querydata4list} from '../assets/js/api';
export default {
  data() {
    return {
      list: []
    };
  },
  mounted() {
    jbxx1Querydata4list().then(({data}) => {
      this.list = data;
    });
  },
  methods: {
    itemClick(item) {
      this.$router.push({
        path: '/newsDetails',
        query: {
          id: item.jbxxId,
          title: '详情',
          method: 'jbxx1querydata4object'
        }
      });
    }
  }

};
</script>

<style lang="less" scoped>
.index {
  background: #eeeeee;
  .swipper {
    height: 423px;
    position: relative;
    .my-swipe .van-swipe-item {
      height: 423px;
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
    .absolute {
      position: absolute;
      z-index: 9999;
      top: 34px;
      left: 0;
      width: 174px;
      height: 58px;
      text-align: center;
      font-size: 34px;
      color: #666666;
      background: #fff;
      border-bottom-right-radius: 29px;
      border-top-right-radius: 29px;
      line-height: 58px;
    }
    /deep/.van-swipe__indicators {
      position: absolute;
      left: unset;
      right: 10px;
      transform: unset;
      bottom: 26px;
      .van-swipe__indicator {
        height: 13px;
        width: 13px;
        z-index: 999;
      }
    }
    .swipe-item-box {
      position: relative;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
      .item-describe {
        position: absolute;
        padding-left: 17px;
        left: 0;
        bottom: 0;
        right: 0;
        height: 71px;
        line-height: 71px;
        z-index: 998;
        background: #000;
        opacity: 0.6;
        text-align: left;
        font-size: 34px;
        color: #fff;
      }
    }
  }
  .content {
    box-sizing: border-box;
    margin: 17px;
    min-height: calc(100vh - 460px);
    background: #fff;
    .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-template-rows: repeat(3, 1fr);
      grid-row-gap: 20px;
      .item-box {
        text-align: center;
        img {
          width: 148px;
          height: 145px;
          margin-top: 46px;
        }
        > div {
          font-size: 34px;
          color: #666666;
          margin-top: 30px;
        }
      }
    }
  }
}
</style>
